<template>
  <div class="login-qrcode w-80 flex flex-col content-center">
    <div class="qrcode relative" :style=" store.isFlag ? '' : 'margin: 0 auto;'" v-if="!(store.sweepLoginCode.code === 802)">
      <div>使用网易云音乐扫码登录</div>
      <img :src="store.sweepLoginCode.qrimg" alt="">
      <span
          class="absolute  yu-color-text top-7 flex flex-col items-center justify-around w-40 h-40"
          :class="store.isFlag ? 'left-20' : 'left-3' "
          v-if="store.sweepLoginCode.code === 800">
            <van-icon class-prefix="i-ic-round-refresh" :class="[yuCodeRefreshStyle]" @click="refreshCode"></van-icon>
          </span>
    </div>
    <div class="flex flex-col items-center" v-if="store.sweepLoginCode.code === 802">
      <div class="p-5">扫码成功请在手机上确认</div>
      <van-icon class-prefix="i-mdi-check-circle-outline" class="w-20 h-20 yu-color-text"></van-icon>
    </div>
  </div>
</template>

<script setup>
import {useStore} from "@/store/index";
import {ref, inject, watchEffect} from "vue";

// 获取登录信息
const store = useStore()

const yuCodeRefreshStyle = ref(['w-20  cursor-pointer h-20 text-red-400 transition duration-300 hover:rotate-360 hover:text-yellow-400'])

// 登录成功刷新页面
const reload = inject('reload')

// 监听扫码状态变化
watchEffect(() => {
  // 803就是授权成功
  if (store.sweepLoginCode.code === 803) {
    // 关闭登录弹窗 pc端
    store.loginPopup = false
    // 移动端切换登录方式的 true手机号验证码登录
    store.toggle = true
    // 获取用户信息，防止获取数据之后没没有渲染上数据
    store.getLoginStatus()
    // 重置code码
    store.sweepLoginCode.code = ''
    // 刷新页面
    reload()
  }
  // 当弹窗关闭 清除循环调用接口（作用是检测是否登录成功）定时器
  if (!store.loginPopup && store.toggle) {
    // 清除循环调用接口（作用是检测是否登录成功）定时器
    clearInterval(store.timer)
  }
})

// 刷新验证码
const refreshCode = () => {
  store.getKey()
}
</script>

<style scoped>

</style>
